<template>
  <div class="shuffling-figure-manage">
    <!-- 业务搜索框 -->
    <search-block @handleSearch="handleSearch"></search-block>
    <!-- 搜索框和按钮组件 -->
    <operate-button
      :buttonDisplayRange="buttonDisplayRange"
      :multipleSelection="multipleSelection"
      @handleSearch="handleSearch"
    ></operate-button>
    <div class="pagination-table-container">
      <pagination-table
        :currentPage="currentPage"
        :operateButton="true"
        :pageSize="pageSize"
        :pageSizes="pageSizes"
        :tableData="tableData"
        :tableLabel="tableLabel"
        :total="total"
        @changePager="changePager"
        @changeSelection="changeSelection"
        ref="paginationTable"
      >
        <template v-slot:default="slotProps">
          <el-button
            @click="handleRole(slotProps.scope.$index, slotProps.scope.row)"
            plain
            round
            size="mini"
            type="primary"
          >分配角色</el-button>
        </template>
      </pagination-table>
    </div>

    <el-dialog :visible.sync="roleManageVisible" ref="elDialog" title="分配角色" width="75%">
      <el-row>
        <el-col :span="18">
          <role-manage
            :operateButton="operateButton"
            :refButtonDisplayRange="refButtonDisplayRange"
            @changeRoleManageSelection="changeRoleManageSelection"
          ></role-manage>
        </el-col>
        <el-col :span="6">
          <right-part-table
            :tableData="userRoleData"
            @clickCaretLeft="clickCaretLeft"
            @clickCaretRight="clickCaretRight"
            @rightPartSelectionChange="rightPartSelectionChange"
            @submitSelect="handleUserRoleData"
          >
            <template>
              <el-table-column label="名称" prop="roleName"></el-table-column>
            </template>
          </right-part-table>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import SearchBlock from './components/searchBlock'
import OperateButton from './components/operateButton'
import PaginationTable from '@/components/PaginationTable/index'
import RightPartTable from '@/components/PaginationTable/rightPart'
import RoleManage from '@/views/system/role/roleManage'
import { SHUFFLING_FIGURE_TYPE } from '@/constants/BusinessSelectItemCode'
export default {
  name: 'SystemUserManage',
  components: {
    SearchBlock,
    OperateButton,
    PaginationTable,
    RightPartTable,
    RoleManage
  },
  mounted() {
    this.getTableData()
  },
  data() {
    return {
      refButtonDisplayRange: 'permission',
      refSelectType: 'multiple',
      operateButton: false,
      roleManageVisible: false,
      buttonDisplayRange: 'manage',
      dataId: null,
      multipleSelection: [],
      pageSizes: [5, 10, 100],
      // pageSize: 0,
      total: 0,
      tableLabel: [
        { keyword: 'id', keyword_zh: 'id' },
        { keyword: 'userName', keyword_zh: '用户名' },
        { keyword: 'account', keyword_zh: '账号' },
        { keyword: 'email', keyword_zh: '邮箱' }
      ],
      tableData: [],
      userRoleData: [],
      currentPage: 1,
      selectRow: {},
      selectRoleManageRow: [],
      userRoleSelection: []
    }
  },
  computed: {
    pageSize() {
      return this.pageSizes[0]
    },
    systemUser() {
      return {
        pager: {
          currentPage: this.currentPage,
          pageSize: this.pageSize
        }
      }
    }
  },
  methods: {
    clickCaretRight() {

      var tempArr = []
      this.selectRoleManageRow.forEach(selectRole => {
        tempArr.push(selectRole)
      })

      var len = this.selectRoleManageRow.length

      //对比两个数组，去重
      this.userRoleData.forEach(userRole => {
        var flag = true
        var roleId = userRole.roleId
        for (var i = 0; i < len; i++) {
          var selectRow = this.selectRoleManageRow[i]
          var selectRoleId = selectRow.roleId
          if (roleId === selectRoleId) {
            flag = false
            break
          }
        }
        if (flag) {
          tempArr.push(userRole)
        }
      })
      this.userRoleData = tempArr
    },
    clickCaretLeft() {
      var tempArr = []
      this.userRoleData.forEach(userRole => {
        tempArr.push(userRole)
      })
      var len = tempArr.length
      for (var i = 0; i < len; i++) {
        var temp = tempArr[i]
        this.userRoleSelection.forEach(userRole => {
          if (temp.roleId === userRole.roleId) {
            delete tempArr[i]
          }
        })
      }
      this.userRoleData = tempArr
    },
    rightPartSelectionChange(val) {
      this.userRoleSelection = val
    },
    changeRoleManageSelection(multipleSelection) {
      this.selectRoleManageRow = []
      multipleSelection.forEach(selection => {
        var selectRole = {
          roleId: selection.id,
          roleName: selection.name,
          userId: this.selectRow.id
        }
        this.selectRoleManageRow.push(selectRole)
      })
    },

    handleUserRoleData() {
      this.roleManageVisible = false
      var userId = this.selectRow.id
      var roleIds = []
      this.userRoleData.forEach(userRole => {
        roleIds.push(userRole.roleId)
      })
      var params = {
        userId: userId,
        roleIds: roleIds
      }
      this.$store.dispatch('role/handleUserRole', params).then(res => {
        this.$message({
          type: 'success',
          message: '操作成功!'
        })
      })
    },
    handleRole(index, row) {
      this.selectRow = row
      var userId = row.id
      this.roleManageVisible = true
      //获取当前用户的角色
      this.$store.dispatch('role/getByUserId', userId).then(userRoleList => {
        this.userRoleData = userRoleList
      })
    },
    //多选
    changeSelection(val) {
      this.multipleSelection = val
    },
    changePager(pager) {
      this.systemUser.pager = pager
      this.getTableData()
    },
    getTableData() {
      this.$store
        .dispatch('systemUser/queryForList', this.systemUser)
        .then(res => {
          this.total = res.total
          this.tableData = res.list
        })
    },
    handleSearch(searchParams) {
      if (!!searchParams) {
        this.systemUser.userName = searchParams.userName
        this.systemUser.type = searchParams.type
      }
      this.getTableData()
    }
  }
}
</script>

<style lang="scss" scoped>
.saearch-block-container {
  padding: 20px;
}
.pagination-table-container {
  padding: 0 20px 20px 20px;
}
.operate-button-container {
  padding: 0 20px 20px 20px;
}
</style>

